<template>
	<div>
		<div class="table">
			<div class="crumbs">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 帖子列表</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
			<div class="container">
				<div class="handle-box">
					<el-select v-model="getGiftData['type']" placeholder="选择分类" class="handle-select mr10">
						<el-option key="0" label="全部" value=""></el-option>
						<el-option key="1" label="实物" value="1"></el-option>
						<el-option key="2" label="虚拟" value="2"></el-option>
					</el-select>
					<el-select v-model="getGiftData['status']" placeholder="选择状态" class="handle-select mr10">
						<el-option key="0" label="全部" value=""></el-option>
						<el-option key="1" label="上架中" value="1"></el-option>
						<el-option key="2" label="下架中" value="2"></el-option>
					</el-select>
					<el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
				</div>
				<el-table :data="giftList" border class="table" ref="multipleTable">
					<el-table-column prop="GiftId" label="ID" width="120">
					</el-table-column>
					<el-table-column prop="Name" label="礼物名" sortable width="150" align="center">
					</el-table-column>
					<el-table-column label="礼物类型" width="120">
						<template slot-scope='scope'>
							<div>{{types[scope.row.Type-1]}}</div>
						</template>
					</el-table-column>
					<el-table-column prop="Price" label="价格" width="120">
					</el-table-column>
					<el-table-column prop="Amount" label="积分" width="120">
					</el-table-column>
					<el-table-column prop="StockNum" label="库存" width="120">
					</el-table-column>
					<el-table-column prop="Postage" label="邮费">
					</el-table-column>
					<el-table-column prop="ExchangeNum" label="已兑换数">
					</el-table-column>
					<el-table-column label="图片/视频" align="center" width="200px">
						<template slot-scope="scope">
							<div v-if="scope.row.Images" class="source-box"> 
								<el-carousel height="80px" indicator-position="none">
								<el-carousel-item v-for="item in scope.row.imgArr" :key="item">
									<img :src="item" alt="" class="source">
								</el-carousel-item>
								</el-carousel>
							</div>
							<div v-if="scope.row.Videos" class="source-box"> 
								<video :src="scope.row['Videos']" class="source" controls></video>
							</div>
							<div v-if="!scope.row.Videos&&!scope.row.Images"> 
								<h5>没有图片/视频</h5>
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="CreateTime" label="发布时间">
					</el-table-column>
					<el-table-column prop="CreateTime" label="状态" align="center">
						<template v-slot="scope">
							<div>
								{{scope.row.Status==1?'上架中':'下架中'}}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="180" align="center">
						<template slot-scope="scope">
							<el-button type="text" :class="scope.row.Status==1?'red':''" :icon="scope.row.Status==1?'el-icon-download':'el-icon-upload2'" @click="handleEdit(scope.$index, scope.row)">{{scope.row.Status==1?"下架":"上架"}}</el-button>
							<el-button type="text" icon="el-icon-view" @click="lookDetail(scope.$index)">查看详情</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="pagination">
					<el-pagination background :page-size="pageSize" @current-change="handleCurrentChange" layout="prev, pager, next" :total="postTotalCount">
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="detail-info" v-show="showDetail" @click.self="closeDetailBox">
			<div class="detail">
				<el-carousel height="200px" class="banner-pics">
					<el-carousel-item v-for="img in giftInfo['imgArr']" :key="img">
						<img :src="img" alt="" class="detailSource">
					</el-carousel-item>
				</el-carousel>
				<div class="base-info">
					<p class="gift-name">{{giftInfo['Name']}}</p>
					<div>
						<p class="gift-price">
							<span>积分：</span><span>{{giftInfo['Amount']}}</span>
						</p>
						<p class="gift-price">
							<span>库存：</span><span>{{giftInfo['StockNum']}}</span>
						</p>
						<p class="gift-price">
							<span>邮费：</span><span>{{giftInfo['Postage']}}</span>
						</p>
						<p class="gift-price">
							<span>销量：</span><span>{{giftInfo['ExchangeNum']}}</span>
						</p>
					</div>
				</div>
				<div class="giftDesc" v-html="giftInfo['Description']">
				</div>
			</div>
		</div>
	</div>
</template>

<script>
    import { getGiftList, subGift } from '../../api/gift';
    export default {
        name: 'basetable',
        data() {
            return {
                giftList:[],
                categoryList:[],
                pageSize:0,
                postTotalCount:0,
                getGiftData:{
                    Page:1,
                    PageSize:10,
                    type:'',
					status:'' 
                },
				types:['实物','虚拟'],
				showDetail:false,
				giftInfo:{}
            }
        },
        created() {
            this.getData();
        },
        methods: {
            // 分页导航
            handleCurrentChange(val) {
                this.getGiftData.Page = val;
                this.getData();
            },
            // 获取 easy-mock 的模拟数据
            getData() {
                const that = this;
                getGiftList(that.getGiftData).then(res=>{
                    if(res.flag==1){
                        let newData = res.data.Results.map(gift=>{
                            gift.imgArr = gift.Images.split(",");
                            return gift
                        });
                        this.giftList=newData;
                        this.pageSize = res.data.PageSize;
                        this.postTotalCount = res.data.TotalCount;
                    }else{
                        this.$message.error(res.msg);
                    };
                }).catch(err=>{
                    this.$message.error(err.msg);
                });
            },
            /**
             * 搜索
             */
            search(){
                this.getData();
            },
			/**
			 * 上下架礼物
			 */
			handleEdit(index,data){
				const giftId = data.GiftId;
				const type = data.Status == 1 ? 'off' : 'on';
				const newStatus = data.Status == 1 ? 2 : 1;
				subGift({
					type:type,
					giftId:giftId
				}).then(res=>{
					if(res.flag == 1){
						this.$message({
							message:res.msg,
							type:"success"
						})
						this.giftList[index]["Status"] = newStatus;
					}else{
						this.$message({
							message:res.msg,
							type:"error"
						})
					}
				})
				.catch(err=>{
					this.$message({
						message:err.msg,
						type:"error"
					});
				});
			},
			/**
			 * 查看礼物详情
			 */
			lookDetail(index){
				this.giftInfo = this.giftList[index];
				this.showDetail = true;
			},
			/**
			 * 关闭弹窗
			 */
			closeDetailBox(){
				this.showDetail = false;
			}
		}
    }

</script>

<style scoped>
    .el-carousel__button{
        width: 10px;
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 200px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
    .source-box{
        width: 200px;
        height: 80px;
    }
    .source{
        margin:o auto;
        height: 100%;
    }
	.detailSource{
		height: 100%;
	}
    .user-head{
        width: 60px;
        height: 60px;
    }
	
	.detail-info{
		position: fixed;
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.7);
		z-index: 99;
	}
	.banner-pics{
		background: #f3f3f3;
		border-bottom: 1px solid #f3f3f3;
	}
	.detail{
		position: absolute;
		top:50%;
		left:50%;
		margin-left:-187px;
		margin-top:-283px;
		width: 375px;
		height: 567px;
		border-radius: 8px;
		background: #fff;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	.gift-name{
		font-size: 16px;
		font-weight: bold;
		padding:10px 20px;
		color:#333;
	}
	.giftDesc{
		color:#666;
		padding:0 20px;
		font-size: 14px;
		margin-top:30px;
	}
	.gift-price{
		display: inline-block;
		width: 50%;
		text-align: center;
		line-height: 30px;
	}
</style>
